<!--全局页面滚动条-->
<template>
  <div class="bar-progress">
    <span class="time">{{currentTime | formatTime}}</span>
    <div class="bar" ref="bar" :style="{backgroundImage:backgroundStyle}">
      <span class="icon" ref="icon"></span>
    </div>
    <span class="time">{{duration  | formatTime}}</span>
  </div>
</template>

<script>
export default {
  props: {
    value: Number,
    // 接收外部属性
    currentTime: Number, 
    duration: Number
  },
  // 过滤器声明
  filters: {
    formatTime(value) {
      // console.log('过滤器',value)
      let min = Math.floor(value / 60);
      let sec = Math.floor(value % 60);
      sec = sec > 9 ? sec : "0" + sec;
      return `${min}:${sec}`
    }
  },
  computed:{
    backgroundStyle(){
      const present = this.value * 100;
      return `linear-gradient(to right,red 0%,red ${present}%,grey ${present}%,grey 100%)`
    }
  },
  watch: {
    value: {
      handler() {
        this.$nextTick(() => {
          // console.log(this.value)
          // 调整icon的位置
          this.$refs.icon.style.transform = `translate(${
            this.maxWidth * this.value
          }px, -50%)`;
        });
      },
      immediate: true, //初始化后就执行
    },
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {
    // 添加移动端触摸事件
    const bar = this.$refs.bar;
    const icon = this.$refs.icon;

    const maxWidth = (this.maxWidth = bar.offsetWidth - icon.offsetWidth);

    icon.addEventListener("touchstart", (ev) => {
      const start = ev.changedTouches[0].clientX;
       let x = this.maxWidth * this.value
      //  告诉外部触摸开始了
      this.$emit('start')
      const touchmoveCallback = (ev) => {
        let offset = ev.changedTouches[0].clientX - start + x;
        if (offset < 0) {
          offset = 0;
        }
        if (offset > maxWidth) {
          offset = maxWidth;
        }
        
        icon.style.transform = `translate(${offset}px, -50%)`;
        const progress = offset / maxWidth;
        // 传值给外部
        this.$emit('input',progress);
      };
      const touchendCallback = (ev) => {
      //  告诉外部触摸结束了
        this.$emit('touchend')
        //   移除监听
        document.removeEventListener("touchmove", touchmoveCallback);
        document.removeEventListener("touchend", touchendCallback);
      };
      //   添加监听
      document.addEventListener("touchmove", touchmoveCallback);
      document.addEventListener("touchend", touchendCallback);
    });
  },
};
</script>
<style lang="scss" scoped>
.bar-progress {
  width: 80%;
  margin: 5px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .bar {
    position: relative;
    flex: 1;
    height: 4px;
    background: #fff;
    .icon {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: red;
      border: 3px solid #fff;
      &.icon::before {
        content: "";
        position: absolute;
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
      }
    }
  }
  .time {
    color: #666;
    font-size: 12px;
    margin: 0 5px;
  }
}
</style>